<template>
  <div>
    <t-dialog
      :header="editoradd == 'add'?'新增变量':'编辑变量'"
      body="水平居中显示的对话框"
      :visible="isshow"
      @close="onReset"
      type="reset"
      :footer="false"
      width="800px"
    >
      <dk-divider style="margin: 10px 0"></dk-divider>
      <t-form
        ref="form"
        :rules="FORM_RULES"
        :data="formData"
        :colon="true"
        reset-type="initial"
        @reset="onReset"
        @submit="onSubmit"
        scrollToFirstError="smooth"
        label-width="160px"
      >
        <t-form-item label="变量名称" name="variablesname">
          <t-input
            v-model="formData.variablesname"
            placeholder="请输入变量名称"
            @enter="onEnter"
            :maxlength="10"
            show-limit-number
          ></t-input>
        </t-form-item>

        <t-form-item label="变量来源" name="variablessource">
          <t-radio-group v-model="formData.variablessource">
            <t-radio value="0">导入</t-radio>
            <t-radio value="1">通话中采集</t-radio>
          </t-radio-group>
        </t-form-item>

        <t-form-item label="变量类型" name="variablestype">
          <t-select
            v-model="formData.variablestype"
            :options="ScenemsgOptions"
            placeholder="请选择变量类型"
          >
          </t-select>
        </t-form-item>

        <t-form-item label="采集表达式" name="expression">
          <t-input
            v-model="formData.expression"
            placeholder="请输入采集表达式"
            @enter="onEnter"
          ></t-input>
        </t-form-item>

        <t-form-item label="变量说明" name="variablesnotes">
          <t-textarea v-model="formData.variablesnotes" placeholder="请输入变量说明" clearable />
        </t-form-item>

        <t-form-item label="是否保存至用户属性" name="attributes">
          <t-radio-group v-model="formData.attributes">
            <t-radio value="0">是</t-radio>
            <t-radio value="1">否</t-radio>
          </t-radio-group>
        </t-form-item>

        <t-form-item class="buttonbut">
          <t-space size="small">
            <t-button theme="default" variant="base" type="reset"
              >取消</t-button
            >
            <t-button theme="primary" type="submit">提交</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-dialog>
  </div>
</template>
    
<script setup>
import { ref, defineProps, reactive, watchEffect } from "vue";
import { nanoid } from "nanoid";
import { MessagePlugin } from "tdesign-vue-next";
import { getcreatetask } from "@/api/callOutTasks/index.js";
import {
  ScenemsgOptions,
} from "../formcolumn/knowledgeBase";

const props = defineProps({
  // 默认选中的部门id
  isshow: {
    type: Boolean,
    default: "",
  },
  editoradd: {
    type:String,
  }
});
const emit = defineEmits(["event"]);

const formData = ref({
  variablesname: "", // 变量名称
  variablessource: '0', // 变量来源
  variablestype: '', // 变量类型
  expression: "", //采集表达式
  variablesnotes: "", // 变量说明
  attributes: '0', // 是否保存至用户属性
});

const form = ref(null);
//   校验
const FORM_RULES = ref({
  variablesname: [{ required: true, message: "请输入变量名称" }],
  variablessource: [{ required: true, message: "请选择变量来源" }],
  variablestype: [{ required: true, message: "请选择变量类型" }],
  expression: [{ required: true, message: "请输入采集表达式" }],
  //   Scenemsg: [{ required: true, message: "请选择场景信息" }],
});

//取消
const onReset = () => {
  //   MessagePlugin.success("重置成功");
  formData.value.answerarr =[]
  form.value.reset();
  emit("event", false);
};
//提交
const onSubmit = async ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success("提交成功");
    // emit('event', false);
    console.log(formData.value);
    // const res = await getcreatetask(formData);
    // console.log(res);
  } else {
    console.log("Validate Errors: ", firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

// 禁用 Input 组件，按下 Enter 键时，触发 submit 事件
const onEnter = (_, { e }) => {
  e.preventDefault();
};
</script>
    
    <style lang="scss" scoped>
.buttonbut {
  display: flex;
  justify-content: space-between;
}
.outtimecla {
  display: flex;
  flex-direction: column;
  .outtimecla_item {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
  }
}
.delsvgbox {
  display: flex;
  justify-content: space-between;
  //   padding: 8px;
}
.huidabox {
  display: flex;
  align-items: center;
  padding: 8px 0;
  span {
    width: 60px;
    // text-align: right;
  }
}
.optionitembox {
  display: flex;
  align-items: center;
}
:deep(.t-dialog__ctx .t-dialog) {
  max-height: 90%;
  overflow-y: scroll;
}
</style>
    